
<template>
	<el-carousel indicator-position="outside" height="80vh" style="width: 100%;">
		<el-carousel-item v-for="(item, index) in Lucy" :key="index">
			<div class="blessing-card" style="height:80vh;">
				<el-card class="blessing-content;" style=" height:100%;width:100%;display: grid;place-items: center;">
					<div class="blessing-text">
						<i class="el-icon-star-on blessing-icon"></i>
						<h2 class="blessing-title">{{ item }}</h2>
						<i class="el-icon-star-on blessing-icon"></i>
					</div>
					<div class="decoration">
						<div class="heart">❤</div>
						<div class="flower">🌼</div>
					</div>
				</el-card>
			</div>
		</el-carousel-item>
	</el-carousel>
</template>
<script>
	import http from '../../utils/request.js'
	export default {
		data() {
			return {
				Lucy: ["祝您早日康复！", "愿您身体健康，万事如意！", "请多保重，祝您平安出院！",
					"愿您每天都有好心情，早日恢复活力！", "祝您治疗顺利，早日回家团圆！"
				],
			}
		},
		async created() {
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}

		.el-col {
			border-radius: 4px;
		}

		.text {
			font-size: 14px;
		}

		.item {
			margin-bottom: 18px;
			line-height: 1.8;
		}

		/* 卡片头部样式 */
		.card-header {
			line-height: 2.5;
			/* 设置头部行高 */
			min-height: 40px;
			/* 设置最小高度 */
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: space-between;
			/* 左右布局 */
		}

		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}

		.clearfix:after {
			clear: both
		}

		.box-card {
			width: 95%;
			height: 80vh;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.box-card {
		width: 95%;
		height: 80vh;
	}
</style>